Crear un sitio web se basa en dos lenguajes principales: HTML para la estructura y CSS para el estilo.
HTML (HyperText Markup Language) es el esqueleto de tu página. Define el contenido y su organización.
<!DOCTYPE html>
: Indica que es un documento HTML5.<html lang="es">
: La etiqueta principal que envuelve todo el contenido, indicando el idioma.<head>
: Contiene metadatos (información sobre la página, no visible).
<meta charset="UTF-8">
: Asegura la correcta visualización de caracteres.<meta name="viewport" content="width=device-width, initial-scale=1.0">
: Crucial para la adaptabilidad en diferentes dispositivos.<title>
: El texto que aparece en la pestaña del navegador.<style>
: Aquí se escriben las reglas de estilo CSS.<body>
: Contiene todo el contenido visible de tu sitio (texto, imágenes, enlaces).Dentro del <body>
, usas etiquetas para estructurar tu contenido:
<h1>, <h2>
, etc.: Encabezados para títulos y subtítulos.<p>
: Párrafos para bloques de texto.<div>
: Contenedores genéricos para agrupar elementos y aplicar estilos.<!-- ... -->
: Comentarios que no se muestran en la página.CSS (Cascading Style Sheets) es lo que hace que tu sitio se vea bien: colores, fuentes, tamaños, etc.
body
, h1
, .clase
).background-color: blue;
).Un sitio responsivo se ve bien en cualquier dispositivo.
<meta name="viewport" content="width=device-width, initial-scale=1.0">
: El primer paso.%
, rem
, em
en lugar de píxeles fijos.@media (max-width: 600px) { ... }
).